<%--
  Created by IntelliJ IDEA.
  User: 14465
  Date: 2018/3/23
  Time: 9:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        .bar {
            height: 18px;
            background: green;
        }
    </style>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="/upload" multiple>
<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>


<script src="/static/js/jquery-1.9.1/jquery.min.js"></script>
<script src="/static/js/fileupload/vendor/jquery.ui.widget.js"></script>
<script src="/static/js/fileupload/jquery.iframe-transport.js"></script>
<script src="/static/js/fileupload/jquery.fileupload.js"></script>
<script>
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            add: function (e, data) {
                data.context = $('<button/>').text('Upload')
                    .appendTo(document.body)
                    .click(function () {
                        data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                        data.submit();
                    });
            },
            done: function (e, data) {
                data.context.text('Upload finished.');
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css(
                    'width',
                    progress + '%'
                );
            }
        });
    });
</script>
</body>
</html>
